<template>
    <div>
        <el-aside  class="aside" v-loading="loading" >
            <left2 v-for="(catgray, index) in catgrayList"  :key="index" 
            @selectCatgray="selectC(catgray.pk)"
            :class="defaultActive == catgray.pk ? 'active' : ''"
            @editCatgray="editC(catgray.pk,catgray.fields.name)"
            @delCatgray="delC(catgray.pk)"
            >
                {{ catgray.fields.name }}
            </left2>        
        </el-aside>
        <FormDrawer ref="formDrawerRef" :title="catGrayTitle" size="30%" @submit="handleSubmit">
            <template #title>新增分类</template>
            <template #default>
            <el-form label-width="80px" :rules="rules" ref="formRef" :model="form">
                <el-form-item label="分类名称" prop="name">
                    <el-input v-model="form.name" style="width: 90%"></el-input>
                </el-form-item>
            </el-form>
            </template>
            <template #footer>
                <el-button type="primary" @click="onSubmit">确定</el-button>
            </template>
        </FormDrawer>
    </div>
</template>
<script setup>
import { ref,reactive,computed } from 'vue'
import left2 from './left2.vue';
import { getImageList,getImageClassList,updateImageClass,deleteImageClass,createImageClass } from '@/api/image_class'
import FormDrawer from "@/components/FormDrawer.vue"

const loading = ref(false)
// 获取分类
const catgrayList = ref([])

const defaultActive = ref('3')
const getCatgray = () => getImageClassList(1,10).then(res => {
    console.log('getCatgray',res)
    loading.value = true
    catgrayList.value = res.list
    defaultActive.value = res.list[0].pk.toString()
}).finally(() => {loading.value = false})
getCatgray()
// 点击分类
const emit = defineEmits(['selectCatgrayId'])
const selectC = (id) => {
    console.log('selectC',id)
    defaultActive.value = id
    emit('selectCatgrayId',id)
    getImageList(id,10).then(res => {
        // imageList.value = res.list
    })
}

// 编辑分类
const formDrawerRef = ref(null)
const editFlag = ref(0)
const form = reactive({
    name:"",
    order:50,
    id:editFlag.value
})

const formRef = ref(null)
const catGrayTitle = computed(() => editFlag.value ? '编辑分类' : '新增分类')

const rules = ref({
    name: [
        { required: true, message: '请输入分类名称', trigger: 'blur' },
    ]
})
const editC = (id,name) => {
    formDrawerRef.value.open()
    editFlag.value = id
    form.name = name
}
const addCatgray = () => {
    formDrawerRef.value.open()
    editFlag.value = 0
    form.name = ""
}
defineExpose({
    addCatgray
})
// 删除分类
const delC = (id) => {
    deleteImageClass({imagId: id}).then(res => {
        catgrayList.value = catgrayList.value.filter(item => item.pk != id)
    })
}
const handleSubmit = () => {
    formRef.value.validate((valid) => {
        if (!valid) return
        formDrawerRef.value.showLoading()
        const fun = editFlag.value ? updateImageClass({"editId":editFlag.value,"form":form}) : createImageClass(form)
        fun.then(res => {
            if(editFlag.value){
                catgrayList.value.forEach(item => {
                if(item.pk == editFlag.value) {
                    item.fields.name = form.name
                }
                })
            }else{
                getCatgray()
                
            }
            
        })
        
     
        formDrawerRef.value.hideLoading()
        formDrawerRef.value.close()
        // location.reload()
})
    
}

</script>
<style scoped>
.aside{
width:"500px"
}

.active{
background-color: #EDF5FF;
}
</style>